<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI案件详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }

        /* 主内容区和工作流容器的父容器 */
        .content-wrapper {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 主内容区 */
        .main-content {
            flex-grow: 1; /* 占据剩余空间 */
            margin-right: 20px; /* 与工作流容器的间距 */
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            position: relative;
        }

        .page-title-container {
            display: flex;
            align-items: center;
        }

        .back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3498db;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            font-size: 18px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .back-btn:hover {
            background: #2980b9;
            transform: translateX(-3px);
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .user-name {
            font-weight: bold;
        }

        /* 案件详情 */
        .detail-container {
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .detail-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .detail-title {
            font-size: 18px;
            font-weight: bold;
        }

        .detail-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            background: #3498db;
            color: white;
        }

        .detail-content {
            padding: 20px;
        }

        .detail-section {
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            color: #2c3e50;
        }

        .detail-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .detail-item {
            width: 33.33%;
            padding-right: 20px;
            margin-bottom: 10px;
        }

        .detail-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .detail-value {
            font-size: 15px;
            font-weight: 500;
        }

        .detail-full-width {
            width: 100%;
        }

        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tag {
            display: inline-block;
            padding: 4px 10px;
            background: #f1f1f1;
            border-radius: 20px;
            font-size: 13px;
            color: #555;
        }

        /* 工作流样式 */
        .workflow-container {
            width: 300px; /* 固定宽度 */
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow-y: auto; /* 允许滚动 */
            flex-shrink: 0; /* 不缩小 */
        }

        .workflow-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
        }

        .workflow-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }

        .workflow-content {
            padding: 20px;
        }

        .workflow-step {
            position: relative;
            padding-left: 30px;
            padding-bottom: 25px;
            border-left: 2px solid #e0e0e0;
        }

        .workflow-step:last-child {
            border-left: none;
            padding-bottom: 0;
        }

        .step-dot {
            position: absolute;
            left: -6px;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #3498db;
            z-index: 1;
        }

        .workflow-step.completed .step-dot {
             background: #2ecc71; /* Completed step color */
        }

        .workflow-step.current .step-dot {
            background: #e74c3c; /* Current step color */
        }


        .step-content {
            margin-bottom: 5px;
        }

        .step-title-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .step-title {
            font-weight: bold;
        }

        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            color: white;
            margin-left: 8px;
        }

        /* 不同状态的颜色 */
        .status-pending {
            background-color: #e74c3c; /* 红色 - 待处理 */
        }

        .status-progress {
            background-color: #3498db; /* 蓝色 - 进行中 */
        }

        .status-approved {
            background-color: #2ecc71; /* 绿色 - 已完成/已确认 */
        }

        .status-waiting {
            background-color: #f39c12; /* 橙色 - 等待中 */
        }

        .step-info {
            font-size: 14px;
            color: #666;
        }

        .step-time {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        .step-user {
            display: flex;
            align-items: center;
            margin-top: 8px;
            font-size: 13px;
            color: #555;
        }

        .step-user-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .signature-placeholder {
            border: 1px dashed #ccc;
            padding: 10px;
            margin-top: 10px;
            font-size: 14px; /* Increased font size */
            color: #555; /* Darker color */
            text-align: center;
            min-height: 40px; /* Ensure space for name */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .workflow-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        .workflow-btn:hover {
            background-color: #2980b9;
        }

        .button-group {
            display: flex;
            gap: 8px;
        }

        /* 操作按钮 */
        .action-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .btn {
            display: inline-block;
            padding: 8px 20px;
            margin: 0 10px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
            border: none;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-success {
            background: #2ecc71;
            color: white;
        }

        .btn-success:hover {
            background: #27ae60;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .btn-warning {
            background: #f39c12;
            color: white;
        }

        .btn-warning:hover {
            background: #d35400;
        }

        /* 模态框样式 */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.6); 
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto; 
            padding: 25px;
            border: 1px solid #888;
            width: 80%; 
            max-width: 500px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .modal-header {
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
        }

        .modal-body .form-group {
            margin-bottom: 15px;
        }

        .modal-body label {
            display: block;
            margin-bottom: 6px;
            font-weight: bold;
            font-size: 14px;
        }

        .modal-body input[type="text"], .modal-body select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .modal-body input[readonly] {
            background-color: #f0f0f0;
            cursor: not-allowed;
        }

        .modal-footer {
            padding-top: 20px;
            border-top: 1px solid #eee;
            margin-top: 25px;
            text-align: right;
        }

        .modal-footer .btn {
            margin-left: 10px;
        }

        .close-btn-modal {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btn-modal:hover,
        .close-btn-modal:focus {
            color: black;
            text-decoration: none;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
             .content-wrapper {
                flex-direction: column; /* 小屏幕下垂直布局 */
                padding: 10px;
            }

            .main-content {
                margin-right: 0;
                margin-bottom: 20px; /* 主内容区下方间距 */
            }

            .workflow-container {
                width: 100%; /* 小屏幕下宽度占满 */
            }

            .header {
                flex-direction: column;
                align-items: flex-start;
            }

            .page-title-container {
                margin-bottom: 10px;
            }

            .user-info {
                width: 100%;
                justify-content: flex-end;
            }
        }


        @media (max-width: 768px) {
            .detail-item {
                width: 50%;
                padding-right: 10px;
            }
            .modal-content {
                margin: 15% auto;
                width: 90%;
            }
        }

        @media (max-width: 576px) {
            .detail-item {
                width: 100%;
                padding-right: 0;
            }
             .action-container {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                margin: 5px 0;
                width: 80%; /* 按钮宽度调整 */
            }
            .modal-footer {
                text-align: center;
            }
            .modal-footer .btn {
                display: block;
                width: 100%;
                margin: 10px 0 0 0;
            }
        }

        /* 报告预览样式 */
        .section-title-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .report-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn-edit-report {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: background-color 0.3s;
        }
        
        .btn-edit-report:hover {
            background-color: #2980b9;
        }
        
        .report-preview {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-top: 10px;
        }
        
        .report-placeholder {
            min-height: 300px;
            position: relative;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 4px;
        }
        
        .report-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .report-header h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .report-id {
            font-size: 14px;
            color: #666;
        }
        
        .report-content {
            padding: 20px;
            text-align: center;
            color: #999;
        }
        
        .report-watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 60px;
            color: rgba(200, 200, 200, 0.3);
            pointer-events: none;
            user-select: none;
        }
        
        /* 附件表格样式 */
        .attachment-table-container {
            overflow-x: auto;
            margin-top: 15px;
        }
        
        .attachment-actions {
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-end;
        }
        
        .attachment-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #ddd;
            background: white;
        }
        
        .attachment-table th, 
        .attachment-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .attachment-table th {
            background: #f5f5f5;
            font-weight: bold;
        }
        
        .attachment-table tr:hover {
            background-color: #f9f9f9;
        }
        
        .btn-small {
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            margin-right: 5px;
            color: white;
        }
        
        .btn-primary {
            background: #3498db;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-danger {
            background: #e74c3c;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .btn-success {
            background: #2ecc71;
        }
        
        .btn-success:hover {
            background: #27ae60;
        }

        .assistant-info {
            background-color: #f5f5f5;
            border-radius: 4px;
            padding: 12px;
            margin-top: 10px;
            display: none;
        }
        
        .assistant-info.show {
            display: block;
        }
        
        .assistant-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .assistant-contact {
            color: #666;
            font-size: 13px;
        }
        
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .error-message.show {
            display: block;
        }
        
        .case-info {
            margin-bottom: 20px;
            padding: 12px;
            background-color: #f0f8ff;
            border-left: 3px solid #3498db;
            border-radius: 3px;
        }
        
        .case-info h3 {
            font-size: 16px;
            margin-bottom: 8px;
            color: #2c3e50;
        }
        
        .case-info p {
            margin: 5px 0;
            font-size: 14px;
            color: #34495e;
        }
        
        .case-info p span {
            color: #7f8c8d;
            display: inline-block;
            width: 80px;
        }

        /* 检测工具样式 */

        .detection-tools-container {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .tool-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: white;
            border-radius: 5px;
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }

        .tool-item:hover {
            border-color: #007bff;
            box-shadow: 0 2px 4px rgba(0,123,255,0.1);
        }

        .tool-item input[type="checkbox"] {
            margin-right: 8px;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .tool-item label {
            cursor: pointer;
            margin: 0;
            flex-grow: 1;
            font-size: 14px;
            color: #495057;
        }

        .tool-item input[type="checkbox"]:checked + label {
            color: #007bff;
            font-weight: 500;
        }

        .tools-grid.disabled .tool-item {
            opacity: 0.6;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <!-- 主内容区和工作流容器的父容器 -->
    <div class="content-wrapper">
        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <div class="page-title-container">
                    <a href="AI新委托案件库.html" class="back-btn">←</a>
                    <div class="page-title">案件详情</div>
                </div>
                <div class="user-info">
                    <div class="user-avatar">A</div>
                    <div class="user-name">管理员</div>
                </div>
            </div>

            <!-- 案件基本信息 -->
            <div class="detail-container">
                <div class="detail-header">
                    <div class="detail-title">案件基本信息</div>
                </div>
                <div class="detail-content">
                    <div class="detail-section">
                        <div class="section-title">案件信息</div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <div class="detail-label">案件编号</div>
                                <div class="detail-value">CASE-2023-101</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">鉴定号</div>
                                <div class="detail-value">-</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">案件类型</div>
                                <div class="detail-value" id="caseTypeDisplay">法医病理鉴定</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">委托时间</div>
                                <div class="detail-value">2023-11-15 14:30:25</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">案发日期</div>
                                <div class="detail-value">2023-10-20</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">鉴定费用</div>
                                <div class="detail-value">3000元</div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">委托人信息</div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <div class="detail-label">姓名</div>
                                <div class="detail-value">张三</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">性别</div>
                                <div class="detail-value">男</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">年龄</div>
                                <div class="detail-value">35岁</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">联系电话</div>
                                <div class="detail-value">13812345678</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">身份证号</div>
                                <div class="detail-value">310123198801011234</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">联系地址</div>
                                <div class="detail-value">上海市浦东新区张江高科技园区</div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">简要案情</div>
                        <div class="detail-row">
                            <div class="detail-item detail-full-width">
                                <div class="detail-value">因交通事故导致骨折，需要评定伤残等级。事故发生于2023年10月20日，委托人在过马路时被一辆机动车撞倒，导致右腿骨折，经过医院治疗后，现需要进行伤残等级评定。</div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">委托鉴定事项</div>
                        <div class="detail-row">
                            <div class="detail-item detail-full-width">
                                <div class="tag-list">
                                    <span class="tag">伤残等级评定</span>
                                    <span class="tag">人身损害程度评定</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">鉴定标准</div>
                        <div class="detail-row">
                            <div class="detail-item detail-full-width">
                                <div class="tag-list">
                                    <span class="tag">人体损伤程度鉴定标准</span>
                                    <span class="tag">伤残等级评定标准</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">其他信息</div>
                        <div class="detail-row">
                            <div class="detail-item">
                                <div class="detail-label">是否重新鉴定</div>
                                <div class="detail-value">否</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">委托人是否提出鉴定旁听（观）</div>
                                <div class="detail-value">否</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">委托人是否提出鉴定人回退</div>
                                <div class="detail-value">否</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">鉴定用途</div>
                                <div class="detail-value">司法鉴定</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">是否法律援助</div>
                                <div class="detail-value">否</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">对方是否到场</div>
                                <div class="detail-value">已通知未到场</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">到场是否签字</div>
                                <div class="detail-value">-</div>
                            </div>
                        </div>
                    </div>
                    <!-- 检测工具选择区域 -->
                    <div class="detail-section">
                        <div class="section-title">检测工具</div>
                        <div class="detection-tools-container" id="detectionToolsContainer">
                            <div class="tools-grid" id="toolsGrid">
                                <!-- 法医病理鉴定相关工具 -->
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-1" name="tools" value="工具实例1">
                                    <label for="tool-1">工具实例1</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-2" name="tools" value="工具实例2" checked>
                                    <label for="tool-2">工具实例2</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-3" name="tools" value="工具实例3">
                                    <label for="tool-3">工具实例3</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-4" name="tools" value="工具实例4" checked>
                                    <label for="tool-4">工具实例4</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-5" name="tools" value="工具实例5">
                                    <label for="tool-5">工具实例5</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-6" name="tools" value="工具实例6">
                                    <label for="tool-6">工具实例6</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-7" name="tools" value="工具实例7">
                                    <label for="tool-7">工具实例7</label>
                                </div>
                                <div class="tool-item">
                                    <input type="checkbox" id="tool-8" name="tools" value="工具实例8" checked>
                                    <label for="tool-8">工具实例8</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">附件列表</div>
                        <div class="attachment-table-container">
                            <div class="attachment-actions">
                                <button class="btn-small btn-primary import-btn"><i class="fa fa-upload"></i> 导入附件</button>
                            </div>
                            <table class="attachment-table">
                                <thead>
                                    <tr>
                                        <th width="5%">序号</th>
                                        <th width="20%">文件名称</th>
                                        <th width="20%">信息内容</th>
                                        <th width="10%">操作人</th>
                                        <th width="15%">操作时间</th>
                                        <th width="15%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>委托书.docx</td>
                                        <td>委托人信息、鉴定事项</td>
                                        <td>张助理</td>
                                        <td>2023-12-20 09:30</td>
                                        <td>
                                            <button class="btn-small btn-primary">编辑提取信息</button>
                                            <button class="btn-small btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>现场照片.jpg</td>
                                        <td>伤情记录</td>
                                        <td>李医生</td>
                                        <td>2023-12-20 10:15</td>
                                        <td>
                                            <button class="btn-small btn-primary">编辑提取信息</button>
                                            <button class="btn-small btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>通话录音.mp3</td>
                                        <td>口述证词</td>
                                        <td>王管理</td>
                                        <td>2023-12-20 11:45</td>
                                        <td>
                                            <button class="btn-small btn-primary">编辑提取信息</button>
                                            <button class="btn-small btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>X光片.jpg</td>
                                        <td>骨骼影像资料</td>
                                        <td>影像科医生</td>
                                        <td>2023-12-20 14:20</td>
                                        <td>
                                            <button class="btn-small btn-primary">编辑提取信息</button>
                                            <button class="btn-small btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>CT影像学报告.pdf</td>
                                        <td>详细影像学分析</td>
                                        <td>放射科主任</td>
                                        <td>2023-12-20 15:30</td>
                                        <td>
                                            <button class="btn-small btn-primary">编辑提取信息</button>
                                            <button class="btn-small btn-danger">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 添加资料摘要区域 -->
                    <div class="detail-section">
                        <div class="section-title-container">
                            <div class="section-title">资料摘要</div>
                            <div class="report-actions">
                                <button class="btn-small btn-success ai-generate-btn"><i class="fa fa-magic"></i> AI提取摘要</button>
                                <button class="btn-small btn-primary edit-btn"><i class="fa fa-edit"></i> 在线编辑</button>
                            </div>
                        </div>
                        <div class="report-preview">
                            <div class="report-placeholder">
                                <div class="report-header">
                                    <h3>案件资料摘要</h3>
                                    <div class="report-id">案件编号：CASE-2023-101</div>
                                </div>
                                <div class="report-content">
                                    <p>资料摘要内容将在提取后显示...</p>
                                    <div class="report-watermark">预览</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改报告预览区域 -->
                    <div class="detail-section">
                        <div class="section-title-container">
                            <div class="section-title">报告预览</div>
                            <div class="report-actions">
                                <button class="btn-small btn-success ai-generate-btn"><i class="fa fa-magic"></i> AI生成报告</button>
                                <button class="btn-small btn-primary edit-btn"><i class="fa fa-edit"></i> 在线编辑</button>
                                <button class="btn-small btn-primary export-btn"><i class="fa fa-file-word-o"></i> 导出Word</button>
                                <button class="btn-small btn-primary export-btn"><i class="fa fa-file-pdf-o"></i> 导出PDF</button>
                            </div>
                        </div>
                        <div class="report-preview">
                            <div class="report-placeholder">
                                <div class="report-header">
                                    <h3>司法鉴定文书</h3>
                                    <div class="report-id">鉴定号：待分配</div>
                                </div>
                                <div class="report-content">
                                    <div class="report-document">
                                        <h4>受理审批表</h4>
                                        <p>案件受理审批信息...</p>
                                    </div>
                                    <div class="report-document">
                                        <h4>鉴定材料流转单</h4>
                                        <p>材料流转记录信息...</p>
                                    </div>
                                    <div class="report-document">
                                        <h4>复核意见书</h4>
                                        <p>复核意见内容...</p>
                                    </div>
                                    <div class="report-document">
                                        <h4>鉴定文书签发单</h4>
                                        <p>签发信息...</p>
                                    </div>
                                    <div class="report-document">
                                        <h4>送达回证</h4>
                                        <p>送达记录信息...</p>
                                    </div>
                                    <div class="report-watermark">预览</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 (已移除) -->
            <!-- 
            <div class="action-container">
                <button class="btn btn-primary">打印委托书</button>
                <button class="btn btn-success">取号</button>
                <button class="btn btn-warning">修改信息</button>
                <button class="btn btn-danger">撤销委托</button>
            </div>
            -->
        </div>

        <!-- 工作流部分 -->
        <div class="workflow-container">
            <div class="workflow-header">
                <div class="workflow-title">工作流程</div>
            </div>
            <div class="workflow-content">
                <div class="workflow-step completed" id="step-1">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">初审</div>
                            <span class="status-tag status-pending">待提交</span>
                        </div>
                        <div class="step-info">初审人已完成初审</div>
                        <div class="step-time">2023-12-20 10:30</div>
                        <div class="step-user">
                            <div class="step-user-avatar">初</div>
                            <div>初审人</div>
                        </div>
                         <div class="signature-placeholder" data-signer="初审人">签字区域占位符</div>
                         <div class="button-group">
                             <button class="workflow-btn signature-btn">确认签字</button>
                             <button class="workflow-btn upload-btn">上传附件</button>
                         </div>
                    </div>
                </div>
                <div class="workflow-step completed" id="step-2">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">待领导确认</div>
                            <span class="status-tag status-waiting">待领导确认</span>
                        </div>
                        <div class="step-info">领导已确认</div>
                        <div class="step-time">2023-12-20 11:15</div>
                        <div class="step-user">
                            <div class="step-user-avatar">领</div>
                            <div>领导</div>
                        </div>
                         <div class="signature-placeholder" data-signer="领导">签字区域占位符</div>
                         <button class="workflow-btn signature-btn">确认签字</button>
                    </div>
                </div>
                <div class="workflow-step" id="step-3">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">委托书下发</div>
                            <span class="status-tag status-progress">委托书下发</span>
                        </div>
                        <div class="step-info">委托书下发处理</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">初</div>
                            <div>初审人</div>
                        </div>
                         <button class="workflow-btn upload-btn">上传附件</button>
                    </div>
                </div>
                <div class="workflow-step" id="step-4">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">确认缴费</div>
                            <span class="status-tag status-waiting">确认缴费</span>
                        </div>
                        <div class="step-info">等待确认缴费</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">初</div>
                            <div>初审人</div>
                        </div>
                        <button class="workflow-btn upload-btn">上传附件</button>
                    </div>
                </div>
                <div class="workflow-step current" id="step-5">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">待委托人签字</div>
                            <span class="status-tag status-waiting">待委托人签字</span>
                        </div>
                        <div class="step-info">等待委托人签字确认</div>
                        <div class="step-time">进行中</div>
                        <div class="step-user">
                            <div class="step-user-avatar">委</div>
                            <div>委托人</div>
                        </div>
                         <div class="signature-placeholder" data-signer="委托人">签字区域占位符</div>
                         <div class="button-group">
                             <button class="workflow-btn signature-btn">确认签字</button>
                             <button class="workflow-btn skip-btn">跳过</button>
                         </div>
                    </div>
                </div>
                <div class="workflow-step" id="step-6">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">分配鉴定人</div>
                            <span class="status-tag status-pending">待取号</span>
                        </div>
                        <div class="step-info">等待分配鉴定人</div>
                        <div class="step-time">待处理</div>
                         <div class="step-user">
                            <div class="step-user-avatar">初</div>
                            <div>初审人</div>
                        </div>
                        <button class="workflow-btn" id="assignAppraiserBtn">分配鉴定人</button>
                    </div>
                </div>
                <div class="workflow-step" id="step-7">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">第一鉴定人</div>
                            <span class="status-tag status-progress">流程中</span>
                        </div>
                        <div class="step-info">对被鉴定人进行查体</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">鉴</div>
                            <div>第一鉴定人</div>
                        </div>
                        <div class="signature-placeholder" data-signer="鉴定人">签字区域占位符</div>
                        <div class="button-group">
                            <button class="workflow-btn signature-btn">确认签字</button>
                            <button class="workflow-btn transfer-btn">转交</button>
                        </div>
                    </div>
                </div>
                <div class="workflow-step" id="step-8">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">第二鉴定人</div>
                            <span class="status-tag status-progress">流程中</span>
                        </div>
                        <div class="step-info">等待第二鉴定人复核</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">鉴</div>
                            <div>第二鉴定人</div>
                        </div>
                        <div class="signature-placeholder" data-signer="校对人">签字区域占位符</div>
                        <button class="workflow-btn signature-btn">确认签字</button>
                    </div>
                </div>
                <div class="workflow-step" id="step-9">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">第三鉴定人（非必选）</div>
                            <span class="status-tag status-progress">流程中</span>
                        </div>
                        <div class="step-info">等待文书审核</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">审</div>
                            <div>文书审核人</div>
                        </div>
                        <div class="signature-placeholder" data-signer="文书审核人">签字区域占位符</div>
                        <button class="workflow-btn signature-btn">确认签字</button>
                    </div>
                </div>
                <div class="workflow-step" id="step-10">
                    <div class="step-dot"></div>
                    <div class="step-content">
                        <div class="step-title-container">
                            <div class="step-title">案件完成</div>
                            <span class="status-tag status-approved">已完成</span>
                        </div>
                        <div class="step-info">案件已处理完毕</div>
                        <div class="step-time">待处理</div>
                        <div class="step-user">
                            <div class="step-user-avatar">初</div>
                            <div>初审人</div>
                        </div>
                        <button class="workflow-btn archive-btn">确认已归档</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分配鉴定人模态框 - 恢复模态框并修改 -->
    <div class="modal" id="assignAppraiserModal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close-btn-modal">&times;</span>
                <h2>分配鉴定人</h2>
            </div>
            <div class="modal-body">
                <div class="case-info">
                    <h3>案件信息</h3>
                    <p><span>案件编号：</span>CASE-2023-102</p>
                    <p><span>案件类型：</span>法医病理鉴定</p>
                    <p><span>委托人：</span>李四</p>
                    <p><span>委托时间：</span>2023-11-16</p>
                </div>
                
                <div class="form-group">
                    <label for="appraisal-number">鉴定号</label>
                    <input type="text" id="appraisal-number" placeholder="请输入鉴定号（选填）">
                </div>
                
                <div class="form-group">
                    <label for="first-appraiser">第一鉴定人</label>
                    <select id="first-appraiser" required>
                        <option value="">请选择第一鉴定人</option>
                        <option value="1" data-assistant="张助理" data-dept="病理科">王医生（病理科）</option>
                        <option value="2" data-assistant="李助理" data-dept="法医科">赵医生（法医科）</option>
                        <option value="3" data-assistant="刘助理" data-dept="毒理科">钱医生（毒理科）</option>
                        <option value="4" data-assistant="陈助理" data-dept="病理科">孙医生（病理科）</option>
                    </select>
                    <div class="error-message" id="first-appraiser-error">请选择第一鉴定人</div>
                    
                    <div id="assistant-info" class="assistant-info">
                        <div class="assistant-name">关联助理：<span id="assistant-name">未选择</span></div>
                        <div class="assistant-contact">联系方式：<span id="assistant-contact">未选择</span></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="second-appraiser">第二鉴定人</label>
                    <select id="second-appraiser" required>
                        <option value="">请选择第二鉴定人</option>
                        <option value="5" data-dept="病理科">周医生（病理科）</option>
                        <option value="6" data-dept="法医科">吴医生（法医科）</option>
                        <option value="7" data-dept="毒理科">郑医生（毒理科）</option>
                        <option value="8" data-dept="病理科">冯医生（病理科）</option>
                    </select>
                    <div class="error-message" id="second-appraiser-error">请选择第二鉴定人</div>
                </div>
                
                <div class="form-group">
                    <label for="reviewer">第三鉴定人（非必选）</label>
                    <select id="reviewer">
                        <option value="">请选择第三鉴定人</option>
                        <option value="9">张主任</option>
                        <option value="10">李主任</option>
                        <option value="11">王主任</option>
                        <option value="12">刘主任</option>
                    </select>
                    <div class="error-message" id="reviewer-error">请选择第三鉴定人</div>
                </div>
                
                <div class="form-group">
                    <label for="comments">备注</label>
                    <input type="text" id="comments" placeholder="请输入备注信息（选填）">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" id="cancel-btn">取消</button>
                <button class="btn btn-primary" id="confirm-btn" disabled>确认</button>
            </div>
        </div>
    </div>

    <script>
        // 为模态框添加样式
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                .assistant-info {
                    background-color: #f5f5f5;
                    border-radius: 4px;
                    padding: 12px;
                    margin-top: 10px;
                    display: none;
                }
                
                .assistant-info.show {
                    display: block;
                }
                
                .assistant-name {
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                
                .assistant-contact {
                    color: #666;
                    font-size: 13px;
                }
                
                .error-message {
                    color: #e74c3c;
                    font-size: 12px;
                    margin-top: 5px;
                    display: none;
                }
                
                .error-message.show {
                    display: block;
                }
                
                .case-info {
                    margin-bottom: 20px;
                    padding: 12px;
                    background-color: #f0f8ff;
                    border-left: 3px solid #3498db;
                    border-radius: 3px;
                }
                
                .case-info h3 {
                    font-size: 16px;
                    margin-bottom: 8px;
                    color: #2c3e50;
                }
                
                .case-info p {
                    margin: 5px 0;
                    font-size: 14px;
                    color: #34495e;
                }
                
                .case-info p span {
                    color: #7f8c8d;
                    display: inline-block;
                    width: 80px;
                }
            </style>
        `);

        // 修改分配鉴定人按钮点击事件，打开模态框
        document.getElementById('assignAppraiserBtn').addEventListener('click', function() {
            // 显示模态框
            document.getElementById('assignAppraiserModal').style.display = 'block';
        });

        // 关闭模态框按钮点击事件
        document.querySelector('.close-btn-modal').addEventListener('click', function() {
            document.getElementById('assignAppraiserModal').style.display = 'none';
        });

        // 取消按钮点击事件
        document.getElementById('cancel-btn').addEventListener('click', function() {
            if (confirm('确定要取消选择吗？已填写的内容将不会保存。')) {
                document.getElementById('assignAppraiserModal').style.display = 'none';
            }
        });

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('assignAppraiserModal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        };

        // 助理自动关联
        const appraiserAssistantMap = {
            '张医生': '张助理',
            '李医生': '李助理',
            '王医生': '王助理',
            '陈医生': '陈助理',
            '赵医生': '赵助理',
            '钱医生': '钱助理'
        };

        // 表单验证和事件处理
        document.addEventListener('DOMContentLoaded', function() {
            const firstAppraiserSelect = document.getElementById('first-appraiser');
            const secondAppraiserSelect = document.getElementById('second-appraiser');
            const reviewerSelect = document.getElementById('reviewer');
            const assistantInfo = document.getElementById('assistant-info');
            const assistantName = document.getElementById('assistant-name');
            const assistantContact = document.getElementById('assistant-contact');
            const confirmBtn = document.getElementById('confirm-btn');
            const firstAppraiserError = document.getElementById('first-appraiser-error');
            const secondAppraiserError = document.getElementById('second-appraiser-error');
            const reviewerError = document.getElementById('reviewer-error');
            
            // 监听第一鉴定人选择变化
            firstAppraiserSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                const assistantValue = selectedOption.getAttribute('data-assistant');
                
                // 重置第二鉴定人选择
                resetSecondAppraiserOptions();
                
                if (assistantValue) {
                    assistantInfo.classList.add('show');
                    assistantName.textContent = assistantValue;
                    assistantContact.textContent = appraiserAssistantMap[assistantValue] || '未知';
                    firstAppraiserError.classList.remove('show');
                    
                    // 更新第二鉴定人选项，避免选择相同科室的医生
                    const selectedDept = selectedOption.getAttribute('data-dept');
                    if (selectedDept) {
                        Array.from(secondAppraiserSelect.options).forEach(option => {
                            if (option.getAttribute('data-dept') === selectedDept) {
                                option.style.color = '#999';
                                option.disabled = true;
                            }
                        });
                    }
                } else {
                    assistantInfo.classList.remove('show');
                    assistantName.textContent = '未选择';
                    assistantContact.textContent = '未选择';
                }
                
                validateForm();
            });
            
            // 重置第二鉴定人选项
            function resetSecondAppraiserOptions() {
                Array.from(secondAppraiserSelect.options).forEach(option => {
                    option.style.color = '';
                    option.disabled = false;
                });
            }
            
            // 监听第二鉴定人选择变化
            secondAppraiserSelect.addEventListener('change', function() {
                if (this.value !== '') {
                    secondAppraiserError.classList.remove('show');
                }
                validateForm();
            });
            
            // 监听第三鉴定人选择变化（非必选）
            reviewerSelect.addEventListener('change', function() {
                validateForm();
            });
            
            // 表单验证
            function validateForm() {
                const isFirstAppraiserSelected = firstAppraiserSelect.value !== '';
                const isSecondAppraiserSelected = secondAppraiserSelect.value !== '';
                
                // 显示或隐藏错误消息
                if (!isFirstAppraiserSelected) {
                    firstAppraiserError.classList.add('show');
                }
                
                if (!isSecondAppraiserSelected) {
                    secondAppraiserError.classList.add('show');
                }
                
                // 判断第一鉴定人和第二鉴定人是否相同
                let isDuplicate = false;
                if (isFirstAppraiserSelected && isSecondAppraiserSelected) {
                    isDuplicate = firstAppraiserSelect.value === secondAppraiserSelect.value;
                }
                
                // 启用或禁用确认按钮（第三鉴定人非必选）
                confirmBtn.disabled = !isFirstAppraiserSelected || !isSecondAppraiserSelected || isDuplicate;
            }
            
            // 确认按钮点击事件
            confirmBtn.addEventListener('click', function() {
                const appraisalNumber = document.getElementById('appraisal-number').value;
                const firstAppraiser = firstAppraiserSelect.options[firstAppraiserSelect.selectedIndex].text;
                const secondAppraiser = secondAppraiserSelect.options[secondAppraiserSelect.selectedIndex].text;
                const reviewer = reviewerSelect.options[reviewerSelect.selectedIndex].text;
                const assistant = assistantName.textContent;
                const comments = document.getElementById('comments').value;
                
                const confirmMessage = `
                    分配成功！
                    案件编号: CASE-2023-102
                    ${appraisalNumber ? '鉴定号: ' + appraisalNumber : ''}
                    第一鉴定人: ${firstAppraiser}
                    关联助理: ${assistant}
                    第二鉴定人: ${secondAppraiser}
                    ${reviewerSelect.value ? '第三鉴定人: ' + reviewer : ''}
                    ${comments ? '备注: ' + comments : ''}
                `;
                
                alert(confirmMessage);
                
                // 关闭模态框
                document.getElementById('assignAppraiserModal').style.display = 'none';
                
                // 更新工作流状态
                document.getElementById('step-6').classList.add('completed');
                document.getElementById('step-7').classList.add('current');
            });
        });

        // 签字弹窗功能
        let currentSignatureButton = null;

        // 添加签字弹窗样式
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                .signature-modal {
                    display: none;
                    position: fixed;
                    z-index: 10000;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.5);
                }
                
                .signature-modal-content {
                    background-color: #fefefe;
                    margin: 10% auto;
                    padding: 0;
                    border-radius: 8px;
                    width: 400px;
                    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                }
                
                .signature-modal-header {
                    padding: 15px 20px;
                    border-bottom: 1px solid #ddd;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .signature-modal-body {
                    padding: 20px;
                }
                
                .signature-modal-footer {
                    padding: 15px 20px;
                    border-top: 1px solid #ddd;
                    text-align: right;
                }
                
                .signature-options {
                    display: flex;
                    gap: 20px;
                    justify-content: center;
                }
                
                .signature-option {
                    flex: 1;
                    padding: 20px;
                    border: 2px solid #e1e5e9;
                    border-radius: 8px;
                    text-align: center;
                    cursor: pointer;
                    transition: all 0.3s;
                }
                
                .signature-option:hover {
                    border-color: #3498db;
                    background-color: #f8f9fa;
                }
                
                .signature-option.selected {
                    border-color: #3498db;
                    background-color: #e3f2fd;
                }
                
                .option-icon {
                    font-size: 2em;
                    margin-bottom: 10px;
                }
                
                .option-title {
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                
                .option-desc {
                    color: #666;
                    font-size: 12px;
                }
                
                .close-btn-signature {
                    color: #aaa;
                    font-size: 28px;
                    font-weight: bold;
                    cursor: pointer;
                }
                
                .close-btn-signature:hover {
                    color: #000;
                }
                
                #uploadSection {
                    margin-top: 20px;
                }
                
                #signatureFile {
                    margin-top: 10px;
                    width: 100%;
                }
            </style>
        `);

        // 创建签字弹窗HTML
        document.body.insertAdjacentHTML('beforeend', `
            <div id="signatureModal" class="signature-modal">
                <div class="signature-modal-content">
                    <div class="signature-modal-header">
                        <h3>选择签字方式</h3>
                        <span class="close-btn-signature">&times;</span>
                    </div>
                    <div class="signature-modal-body">
                        <div class="signature-options">
                            <div class="signature-option" data-type="electronic">
                                <div class="option-icon">📝</div>
                                <div class="option-title">电子签字</div>
                                <div class="option-desc">直接确认完成</div>
                            </div>
                            <div class="signature-option" data-type="print">
                                <div class="option-icon">🖨️</div>
                                <div class="option-title">打印签字</div>
                                <div class="option-desc">上传附件后确认</div>
                            </div>
                        </div>
                        <div id="uploadSection" style="display: none;">
                            <label>上传签字文件：</label>
                            <input type="file" id="signatureFile" accept=".pdf,.jpg,.jpeg,.png">
                        </div>
                    </div>
                    <div class="signature-modal-footer">
                        <button class="btn btn-danger" id="cancelSignature">取消</button>
                        <button class="btn btn-primary" id="confirmSignature" disabled>确认</button>
                    </div>
                </div>
            </div>
        `);

        // 为所有确认签字按钮添加事件监听
        function initSignatureButtons() {
            const signatureButtons = document.querySelectorAll('.signature-btn');
            const signatureModal = document.getElementById('signatureModal');
            const signatureOptions = document.querySelectorAll('.signature-option');
            const uploadSection = document.getElementById('uploadSection');
            const signatureFile = document.getElementById('signatureFile');
            const confirmSignature = document.getElementById('confirmSignature');
            const cancelSignature = document.getElementById('cancelSignature');
            const closeSignature = document.querySelector('.close-btn-signature');

            // 为每个确认签字按钮添加点击事件
            signatureButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentSignatureButton = this;
                    signatureModal.style.display = 'block';
                    resetSignatureModal();
                });
            });

            // 签字方式选择
            signatureOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除其他选项的选中状态
                    signatureOptions.forEach(opt => opt.classList.remove('selected'));
                    // 选中当前选项
                    this.classList.add('selected');
                    
                    const type = this.getAttribute('data-type');
                    if (type === 'print') {
                        uploadSection.style.display = 'block';
                        confirmSignature.disabled = true;
                    } else {
                        uploadSection.style.display = 'none';
                        confirmSignature.disabled = false;
                    }
                });
            });

            // 文件上传变化
            signatureFile.addEventListener('change', function() {
                const selectedOption = document.querySelector('.signature-option.selected');
                if (selectedOption && selectedOption.getAttribute('data-type') === 'print') {
                    confirmSignature.disabled = !this.files.length;
                }
            });

            // 确认签字
            confirmSignature.addEventListener('click', function() {
                const selectedOption = document.querySelector('.signature-option.selected');
                if (!selectedOption) return;

                const type = selectedOption.getAttribute('data-type');
                let message = '';

                if (type === 'electronic') {
                    message = '电子签字完成！';
                } else {
                    const fileName = signatureFile.files[0]?.name || '未知文件';
                    message = `打印签字完成！已上传文件：${fileName}`;
                }

                alert(message);
                
                // 更新按钮状态为已完成
                if (currentSignatureButton) {
                    currentSignatureButton.style.backgroundColor = '#27ae60';
                    currentSignatureButton.textContent = '已签字';
                    currentSignatureButton.disabled = true;
                }

                signatureModal.style.display = 'none';
            });

            // 取消和关闭
            function closeModal() {
                signatureModal.style.display = 'none';
                resetSignatureModal();
            }

            cancelSignature.addEventListener('click', closeModal);
            closeSignature.addEventListener('click', closeModal);

            // 点击模态框外部关闭
            signatureModal.addEventListener('click', function(event) {
                if (event.target === signatureModal) {
                    closeModal();
                }
            });

            // 重置弹窗状态
            function resetSignatureModal() {
                signatureOptions.forEach(opt => opt.classList.remove('selected'));
                uploadSection.style.display = 'none';
                signatureFile.value = '';
                confirmSignature.disabled = true;
                currentSignatureButton = null;
            }
        }

        // 初始化签字按钮功能
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initSignatureButtons, 100); // 确保DOM完全加载后再初始化
        });


    </script>
</body>
</html>